<template>
   <div class="home-page">
     <!--头部导航-->
     <div class="page-top">
       <div class="top-con clearfix">
         <div class="top-left">
           <router-link to="/home" class="top-index"><i></i>首页</router-link>
           <p>嗨，欢迎来到品牌网</p>
           <p>全国服务热线：<span>400-832-5988</span></p>
         </div>
         <div class="top-right">
           <router-link to="/login" :class="[isLogin === false?'':'hidden']" style="margin-right: 10px;">登录</router-link>
           <router-link to="/register" :class="[isLogin === false?'':'hidden']" style="margin-right: 10px;">注册</router-link>
           <a :class="[isLogin === false?'hidden':'']" style="margin-right: 10px;" @mouseenter="showMenu" @mouseleave="showMenu">
             <span>个人中心</span>
             <div class="wrap-center" v-show="showCenter">
               <router-link to="/retrieve/password">重置密码</router-link>
               <router-link to="/personal/center">个人中心</router-link>
               <router-link to="">退出登录</router-link>
             </div>
           </a>
           <router-link to="" style="margin-right: 20px;">品牌商入口</router-link>
           <!--<div class="ser_vipbx">
               <a href="javascript:;" class="ser_vip" id="ser_vips">会员服务<i></i></a>
               <ul class="ser_vip_drp" id="ser_vip_drp">
                   <li><a href="javascript:;">关于我们</a></li>
                   <li><a href="javascript:;">服务申明</a></li>
                   <li><a href="javascript:;">联系我们</a></li>
               </ul>
           </div>-->
           <div class="focus-on">
             关注:&nbsp;&nbsp;
             <!--新浪微博官方号-->
             <div class="sharebx">
               <a href="https://weibo.com/p/1006061676868230/home?from=page_100606&amp;mod=TAB#place" target="_blank" rel="nofollow">
                 <i class="webo"></i>
               </a>
             </div>
             <!--微信扫码-->
             <div class="sharebx" id="weixin">
               <i class="weixin"></i>
               <div class="ewmbx" style="position:absolute;top: 50px; opacity: 0; z-index: -99;">
                 <img src="https://static.chinapp.com/home/img/wx.jpg">
                 <p>扫一扫关注品牌网</p>
               </div>
             </div>
             <!--加QQ-->
             <div class="sharebx">
               <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=85926368&amp;site=qq&amp;menu=yes" target="_blank" rel="nofollow">
                 <i class="tencent"></i>
               </a>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!--搜索区-->
     <div class="search-area">
       <div class="wrap-search clearfix">
         <a href="" class="logo">
           <img src="/static/images/logo/logo2.png"></a>
         <div class="right-search">
           <form>
             <input type="text" placeholder="关键词查询" class="searCh">
             <input type="button" class="btnSearh" value="搜索">
           </form>
         </div>
       </div>
     </div>
     <!--nav导航-->
     <div class="nav">
       <div class="tab">
         <router-link v-for="item in navList" :key="item.id" :to="item.url" class="tab-item">{{item.label}}</router-link>
       </div>
     </div>
     <div class="page-container">
       <!--左侧空白部分-->
       <div class="page-slider-left"></div>
       <div class="pages">
         <!-- 路由插槽：路由跳转的位置 -->
         <router-view/>
       </div>
       <!--右侧空白部分-->
       <div class="page-slider-right">
         <!--福娃-->
         <!--<a>-->
           <!--<img src="/static/images/bg/9a431731433cd984efb3d241ef99ae8.jpg" alt="">-->
         <!--</a>-->
       </div>
     </div>
     <!--页脚-->
     <footer-component></footer-component>
   </div>
</template>

<script>
import TabComponent from '../../components/tab/TabComponent'
import Supply from './supply/Supply'
import Suggest from './suggest/Suggest'
import NewsDynamic from './news/NewsDynamic'
import SendMessage from './message/SendMessage'
import Main from './main/Main'
import AboutUs from './about/AboutUs'
import Purchase from './purchase/Purchase'
import MessageDesc from './main/desc/MessageDesc'
import FooterComponent from '../../components/footer/FooterComponent'
export default {
  name: 'Home',
  components: {FooterComponent, Purchase, AboutUs, Main, SendMessage, NewsDynamic, Suggest, Supply, TabComponent, MessageDesc},
  data () {
    return {
      // 是否登录
      isLogin: this.$store.getters.getIsLogin,
      showCenter: false,
      navList: [
        {
          id: '0',
          label: '首页',
          url: '/home/index.html'
        },
        {
          id: '1',
          label: '枸杞品牌',
          url: '/home/brand.html'
        },
        {
          id: '2',
          label: '相关企业',
          url: '/home/enterprise.html'
        },
        {
          id: '3',
          label: '资讯',
          url: '/home/news.html'
        },
        {
          id: '4',
          label: '建议建言',
          url: '/home/suggest.html'
        },
        {
          id: '5',
          label: '关于我们',
          url: '/home/about.html'
        }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: function () {
      console.log('isLogin:', this.isLogin)
    },
    showMenu: function () {
      console.log('this.showCenter', this.showCenter)
      this.showCenter = !this.showCenter
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home-page
    min-width 1000px
    .tab
      margin 0 auto
      display flex
      width 70%
      min-width 900px
      .tab-item
        color #FFF
        font-size 18px
        line-height 40px
        width 150px
        height 40px
        padding 5px
        text-align center
        cursor pointer
        &:hover
          background-color #F64400
          color: #FFF
      .router-link-active
        background-color #F64400
        color: #FFF
    .page-top
      height: 34px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background: #f2f2f2;
      .top-con
        min-width 1000px;
        width: 70%;
        margin: 0 auto;
        .top-left
          float: left;
          .top-index
            display: block;
            font: 12px/32px "微软雅黑";
            color: #999;
            float: left;
            margin-right: 20px;
            i
              display: block;
              width: 16px;
              height: 14px;
              float: left;
              background: url(./brand/image/bg.png) -784px -98px;
              margin: 9px 7px 0 10px;
          p
            font: 12px/32px "微软雅黑";
            color: #999;
            float: left;
            margin-right: 20px;
            span
              color: #e00b0b;
        .top-right
          float: right;
          position: relative;
          height: 32px;
          .hidden
             display none
             text-align center
          a
            height: 32px;
            display: block;
            font: 12px/32px "微软雅黑";
            color: #999;
            float: left;
            position relative
            cursor pointer
            &:hover
              color #dd4545
            .wrap-center
              position absolute
              border 1px solid #EEE
              left -30px
              background-color #FFF
              a
                width 100px
                height 40px
                line-height 40px
                text-align center
                color #666
                font-size 12px
                border-bottom 1px solid #EEE
                &:hover
                  color #dd4545
          .focus-on
            float: left;
            height: 32px;
            font: 12px/32px "微软雅黑";
            color: #999;
            .sharebx
              position: relative;
              float: right;
              i
                display: block;
                width: 22px;
                height: 22px;
                margin: 5px 6px 0 0px;
              .webo
                background: url(./brand/image/bg.png) -64px 0 no-repeat;
                cursor: pointer;
              .weixin
                background: url(./brand/image/bg.png) -32px 0 no-repeat;
                cursor: pointer;
              .tencent
                background: url(./brand/image/bg.png) 0 0 no-repeat;
                cursor: pointer;
      .top-con:before
          height: 0;
          content: '';
          clear: both;
          overflow: hidden;
          display: block;
    .page-container
       display flex
    .pages
      width: 70%;
      margin: 0 auto;
      min-width: 950px;
      min-height 500px
    .page-slider-left
       width: 15%;
       min-height 500px
    .page-slider-right
      width: 15%;
      min-height 500px
      position relative
      a
        position absolute
        top:200px
        margin-top -50%
        margin-top 70px
        display block
        width 100%
        img
          width calc(100% - 20px)
          height calc(100% - 20px)
          padding:10px
</style>
